<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="dataFormVisible"
    :is-loading="loading"
    @closeDialog="resetData"
    @comfirmBtn="submit"
  >
    <el-form
      ref="dataForm"
      slot="content"
      :rules="rules"
      :model="dataForm"
      label-position="right"
      label-width="140px"
    >
      <el-form-item label="数据类名称" prop="materialTypeName">
        <el-input v-model.trim="dataForm.materialTypeName" placeholder="请输入数据类名称" maxlength="20"
                  show-word-limit class="limit" clearable />
      </el-form-item>
      <el-form-item label="数据类编码" prop="materialTypeCode">
        <autofillInput v-if="dataFormVisible" ref="autofillInputRef" v-model="dataForm.materialTypeCode"
                       :disabled="dialogStatus==='update'?true:false"
                       :autofill-size="8" :maxlength="'20'" :label="'数据类编码'"
                       :status ="dialogStatus"/>
      </el-form-item>
      <el-form-item label="状态" prop="areaLevel">
        <el-radio-group v-model="dataForm.enable">
          <el-radio :label="1" @change="remarkChange">启用</el-radio>
          <el-radio :label="0" @change="remarkChange">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input v-model.trim="dataForm.remark" :autosize="{ minRows: 4, maxRows: 4}" maxlength="50"
                  show-word-limit type="textarea" placeholder="请输入"
                  class="limit" />
      </el-form-item>
    </el-form>
  </dtDialog>
</template>
<script>
import autofillInput from '@/framework/components/dt-autofillInput/index.vue'
import { basicMaterialTypeAdd, basicMaterialTypeEdit } from '@/framework/api/developerCenter/basicData'
import { checkUserName } from '@/framework/utils/validate'

export default {
  components: {
    autofillInput
  },
  data() {
    const regMaterialTypeCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入数据类编码'))
      } else if (!checkUserName(value)) {
        callback(new Error('请输入1-20位数字或大小写字母'))
      } else {
        callback()
      }
    }
    return {
      textMap: {
        update: '修改基础数据',
        create: '新建基础数据'
      },
      dataFormVisible: false,
      rules: {
        materialTypeName: [
          { required: true, message: '请输入数据类名称', trigger: 'blur' }
        ],
        materialTypeCode: [
          { required: true, validator: regMaterialTypeCode, trigger: ['blur', 'change'] }
        ]
      },
      dataForm: {
        materialTypeName: '',
        materialTypeCode: '',
        remark: '',
        enable: 1
      },
      dialogStatus: '',
      remarkList: [],
      loading: false
    }
  },
  watch: {
    'dataForm.materialTypeCode': function (n, o) {
      console.log(n, o)
    }
  },
  mounted() {
  },
  methods: {
    // 获取字典表
    // getDictList() {
    //   var params = {
    //     'dictTypeCode': 'area_level'
    //   }
    //   configApi.getDictList(params).then(res => {
    //     this.remarkList = res.data
    //   })
    // },
    resetData() {
      this.dataForm = {
        materialTypeName: '',
        materialTypeCode: '',
        remark: '',
        enable: 1
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    async handleData(row, type) {
    //   this.getDictList()
      if (type === 'add') {
        this.dialogStatus = 'create'
        this.$refs.autofillInputRef?.handleAutoFill()
        this.resetData()
      } else {
        this.dialogStatus = 'update'
        this.dataForm = row
      }
      this.dataFormVisible = true
      await this.$nextTick()
    },
    submit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          try {
            if (this.dialogStatus === 'create') {
              const data = Object.assign({}, this.dataForm)
              basicMaterialTypeAdd(data).then((res) => {
                this.dataFormVisible = false
                this.$parent.getList()
                this.$message.success('新增成功')
              })
            } else {
              const data = Object.assign({}, this.dataForm)
              basicMaterialTypeEdit(data).then((res) => {
                this.dataFormVisible = false
                this.$parent.getList()
                this.$message.success('修改成功')
              })
            }
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    remarkChange() {}
  }
}
</script>

